@import '~@styles/common.less';

.editContainer {
  padding: 6px;
  background-color: @menu-hover;

  :global {
    .ProseMirror {
      height: 100%;
      font-size: 14px;
      border-bottom-left-radius: 5px;
    }

    .toastui-editor-dropdown-toolbar {
      flex-wrap: wrap;
      height: auto;
    }
    .toastui-editor-defaultUI-toolbar {
      flex-wrap: wrap;
      height: 100%;
    }
    .toastui-editor-contents {
      h3 {
        margin: 18px 0 18px;
      }
      h4 {
        margin: 10px 0 10px;
      }
      h5,
      h6 {
        margin: 9px 0 9px;
      }
      blockquote {
        background: #eee;
      }
      code {
        color: @menu-active;
      }
    }
    .toastui-editor-md-code.toastui-editor-md-marked-text {
      color: @menu-active;
    }
    .toastui-editor-defaultUI {
      border: none;

      .toastui-editor-md-tab-container {
        height: 46px;
      }

      .ProseMirror {
        padding: 10px 1px 10px 10px;
        background: @fff;
      }
    }

    .toastui-editor-md-container .toastui-editor-md-preview {
      padding: 0 1px 0 10px;
      background: @fff;
      border-bottom-right-radius: 5px;

      .toastui-editor-contents {
        padding-top: 0;
        font-size: 14px;
      }
    }
    .toastui-editor-popup-body input[type='text'].tui-colorpicker-palette-hex {
      width: 100px;
    }
    .toastui-editor-popup-color
      .tui-colorpicker-container
      .tui-colorpicker-palette-preview {
      margin-top: 3px;
    }
    .toastui-editor-md-delimiter {
      color: @menu-active;
    }
  }
}

.hidePadding {
  padding: 0;
  background-color: transparent;
}

.dark {
  :global {
    .toastui-editor-defaultUI-toolbar {
      background-color: @dark-bgc-deep;
      border-bottom: 1px solid @dark-gray;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;

      button {
        border: 1px solid @dark-fc;
        background-color: @dark-fc;
      }
    }

    .toastui-editor-defaultUI {
      .toastui-editor-md-tab-container {
        background: @dark-bgc-deep;
        border-bottom: 1px solid @dark-gray;

        .tab-item {
          background: @dark-bgc-deep;
          color: @dark-fc;
          border: 1px solid @dark-gray;
        }

        .tab-item.active {
          background: @dark-bgc;
        }
      }

      .ProseMirror {
        background-color: @dark-bgc-deep;
        color: @dark-fc;
      }

      .toastui-editor-md-block-quote .toastui-editor-md-marked-text,
      .toastui-editor-md-list-item .toastui-editor-md-meta {
        color: @dark-fc;
      }

      .toastui-editor-main .toastui-editor-md-splitter {
        background-color: @dark-gray;
      }

      .toastui-editor-md-code-block-line-background {
        background-color: @dark-bgc;
      }

      .toastui-editor-md-table .toastui-editor-md-table-cell {
        color: @dark-fc;
      }

      // preview
      .toastui-editor-md-container .toastui-editor-md-preview {
        background-color: @dark-bgc-deep;
      }

      .toastui-editor-contents h1,
      .toastui-editor-contents h2,
      .toastui-editor-contents h3,
      .toastui-editor-contents h4,
      .toastui-editor-contents h5,
      .toastui-editor-contents h6 {
        color: @dark-fc;
      }

      .toastui-editor-contents blockquote {
        background-color: @dark-bgc;
      }

      .toastui-editor-contents pre {
        background-color: @dark-bgc;
      }

      .toastui-editor-contents ul,
      .toastui-editor-contents menu,
      .toastui-editor-contents ol,
      .toastui-editor-contents dir {
        color: @dark-fc;
      }

      .toastui-editor-contents p {
        color: @dark-fc;
      }

      .toastui-editor-contents table {
        color: @dark-fc;
      }

      .toastui-editor-contents table th,
      .toastui-editor-contents table td {
        border: 1px solid rgba(225, 225, 225, 0.2);
      }
    }
  }
}

@media screen and (max-width: 960px) {
  .editContainer {
    padding: 5px;
  }

  .dark {
    background-color: @dark-gray;
  }

  :global {
    .toastui-editor-toolbar {
      .toastui-editor-md-tab-container {
        .tab-item {
          height: 40px;
          line-height: 40px;
          margin-top: 6px;
          font-size: 14px;
        }
      }
    }

    .toastui-editor-defaultUI-toolbar {
      padding: 0 0 0 10px;
    }

    .toastui-editor-popup {
      max-width: 300px;
      margin-left: 0;
    }

    .toastui-editor-popup-add-image {
      .toastui-editor-file-select-button {
        width: 100px;
      }
    }
  }
}
